JavaScript-työkalujen integrointi: VS Code -laajennuskehitys

Visual Studio Code (VS Code) on noussut hallitsevaksi voimaksi koodieditorien maailmassa, ja kehittäjät ympäri maailmaa rakastavat sitä sen joustavuuden, rikkaan laajennusekosysteemin ja vankkojen ominaisuuksien vuoksi. Keskeinen osa VS Coden voimaa piilee sen laajennettavuudessa, joka antaa kehittäjille mahdollisuuden räätälöidä IDE omiin tarpeisiinsa ja työnkulkuihinsa sopivaksi. Tämä artikkeli tarjoaa kattavan oppaan JavaScript-kehitystyökalujen integrointiin VS Code -laajennuskehityksen avulla, kattaen kaiken perusteista edistyneisiin tekniikoihin.

Miksi kehittää VS Code -laajennuksia JavaScriptille?

VS Code -laajennusten kehittäminen JavaScriptille tarjoaa lukuisia etuja, jotka vaikuttavat yksittäisiin kehittäjiin, tiimeihin ja laajempaan JavaScript-yhteisöön.

• Parannettu tuottavuus: Automatisoi toistuvia tehtäviä, virtaviivaista työnkulkuja ja vähennä manuaalista työtä, jolloin kehittäjät voivat keskittyä ydinlogiikkaan ja luovaan ongelmanratkaisuun.
• Räätälöity koodausympäristö: Mukauta IDE vastaamaan tiettyjä projektivaatimuksia, koodaustyylejä ja henkilökohtaisia mieltymyksiä, mikä luo mukavamman ja tehokkaamman kehityskokemuksen.
• Parempi koodin laatu: Integroi lintterit, muotoilijat ja koodianalyysityökalut suoraan editoriin, mikä varmistaa koodin yhtenäisyyden, tunnistaa mahdolliset virheet ja edistää parhaita käytäntöjä.
• Saumaton työkalujen integrointi: Tuo ulkoiset työkalut ja palvelut, kuten käännösjärjestelmät, testauskehykset ja pilvialustat, suoraan VS Codeen, luoden yhtenäisen ja integroidun kehitysympäristön.
• Yhteisölle antaminen: Jaa laajennuksesi laajemmalle JavaScript-yhteisölle, mahdollistaen muiden kehittäjien hyötymisen työstäsi ja edistäen yhteistyötä ja innovaatiota.

VS Code -laajennuskehityksen perusteet

Ennen kuin sukellamme teknisiin yksityiskohtiin, käydään läpi VS Code -laajennuskehitykseen vaadittavat olennaiset käsitteet ja työkalut.

Edellytykset

• Node.js ja npm (tai yarn): Node.js tarjoaa JavaScript-ajoympäristön, ja npm (Node Package Manager) tai yarn käytetään projektin riippuvuuksien hallintaan. Varmista, että sinulla on uusimmat versiot asennettuina. Lataa osoitteesta nodejs.org.
• VS Code: Tietenkin tarvitset itse VS Coden. Lataa osoitteesta code.visualstudio.com.
• Yeoman ja VS Code Extension Generator: Yeoman on rungonluontityökalu (scaffolding tool), joka yksinkertaistaa uusien projektien luomista. VS Code Extension Generator tarjoaa valmiiksi konfiguroidun mallipohjan VS Code -laajennuksille. Asenna ne globaalisti npm:n avulla:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Laajennuksen manifesti (package.json)

package.json-tiedosto on laajennuksesi sydän. Se määrittelee laajennuksen metatiedot, riippuvuudet ja aktivointitapahtumat. Tärkeimpiä ominaisuuksia ovat:

• name: Laajennuksesi yksilöllinen tunniste.
• displayName: Ihmisluettava nimi, joka näytetään VS Code Marketplacessa ja laajennusluettelossa.
• description: Lyhyt kuvaus laajennuksen tarkoituksesta.
• version: Laajennuksen versionumero.
• publisher: Julkaisijatunnuksesi (vaaditaan julkaisuun VS Code Marketplacessa).
• engines.vscode: Laajennuksen vaatima vähimmäisversio VS Codesta.
• activationEvents: Taulukko tapahtumista, jotka laukaisevat laajennuksesi aktivoinnin. Yleisiä tapahtumia ovat onCommand:yourCommandId, onLanguage:languageId ja * (aktivoituu käynnistyksessä). Erityisten aktivointitapahtumien käyttö on ratkaisevan tärkeää suorituskyvyn kannalta.
• main: Polku pää-JavaScript-tiedostoon, joka sisältää laajennuksesi koodin.
• contributes: Objekti, joka määrittelee laajennuksen panokset VS Codeen, kuten komennot, valikot, asetukset ja näkymät.
• dependencies: Luettelo npm-paketeista, joista laajennuksesi on riippuvainen.
• devDependencies: Luettelo kehitykseen vaadittavista npm-paketeista, kuten testauskehyksistä ja käännöstyökaluista.

Esimerkki package.json-tiedostosta:

            {
  "name": "my-javascript-tools",
  "displayName": "Omat JavaScript-työkalut",
  "description": "Kokoelma hyödyllisiä JavaScript-kehitystyökaluja.",
  "version": "0.0.1",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Muotoile JavaScript-koodi"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Laajennus-API

VS Code -laajennus-API tarjoaa rikkaan joukon rajapintoja ja funktioita editorin kanssa vuorovaikutukseen, sen ominaisuuksien käyttämiseen ja sen toiminnan muokkaamiseen. Tutustu API:n ydinkäsitteisiin, mukaan lukien:

• vscode.commands: Rekisteröi ja suorita komentoja.
• vscode.languages: Rekisteröi kieliominaisuuksia, kuten koodin täydennys, hover-tiedot ja diagnostiikka.
• vscode.window: Ole vuorovaikutuksessa editori-ikkunan kanssa, näytä viestejä ja pyydä käyttäjältä syötettä.
• vscode.workspace: Käytä työtilaan liittyviä tietoja, kuten tiedostoja, kansioita ja asetuksia.
• vscode.debug: Laajenna debuggausominaisuuksia.
• vscode.scm: Integroi versionhallintajärjestelmiin.

Aktivointitapahtumat

Aktivointitapahtumat ovat ratkaisevan tärkeitä sen hallinnassa, milloin laajennuksesi ladataan ja aktivoidaan. Erityisten aktivointitapahtumien käyttö voi parantaa merkittävästi VS Coden käynnistysnopeutta. Yleisiä aktivointitapahtumia ovat:

• onCommand:<commandId>: Aktivoituu, kun tietty komento suoritetaan.
• onLanguage:<languageId>: Aktivoituu, kun tietyn kielen tiedosto avataan.
• onFileSystem:<scheme>: Aktivoituu, kun tiedosto tietyllä tiedostojärjestelmäskeemalla avataan (esim. file, git, ftp).
• onDebug: Aktivoituu, kun debuggeri käynnistetään.
• onTest: Aktivoituu, kun testejä ajetaan.
• onView:<viewId>: Aktivoituu, kun tietty näkymä on näkyvissä sivupalkissa.
• *: Aktivoituu käynnistyksessä (käytä säästeliäästi, koska se voi vaikuttaa suorituskykyyn).

Ensimmäisen VS Code -laajennuksen luominen

Käydään läpi prosessi yksinkertaisen VS Code -laajennuksen luomiseksi, joka muotoilee JavaScript-koodia Prettierin avulla.

Laajennuksen rungon luominen

1. Avaa pääte ja siirry hakemistoon, johon haluat luoda laajennuksesi.
2. Suorita VS Code Extension Generator:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Vastaa kehotteisiin:
   • Valitse New JavaScript Extension.
   • Anna laajennuksen nimi (esim. javascript-formatter).
   • Anna laajennuksen tunniste (esim. javascript-formatter).
   • Anna kuvaus (esim. Muotoilee JavaScript-koodin Prettierillä.).
   • Valitse, otetaanko TypeScript käyttöön (tässä esimerkissä käytämme JavaScriptiä, mutta TypeScript on erittäin suositeltava suuremmissa projekteissa).
   • Valitse, alustetaanko Git-repository.

Prettierin asentaminen

Asenna Prettier laajennuksesi riippuvuudeksi:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

Muotoilulogiikan toteuttaminen

Avaa extension.js-tiedosto. Tämä tiedosto sisältää laajennuksesi ydinlogiikan. Korvaa olemassa oleva koodi seuraavalla:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Onnittelut, laajennuksesi "javascript-formatter" on nyt aktiivinen!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('Ei aktiivista tekstieditoria.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				railingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Virhe koodin muotoilussa: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

package.json-tiedoston päivittäminen

Muokkaa package.json-tiedostoa rekisteröidäksesi komennon ja määrittääksesi aktivointitapahtuman. Lisää seuraava contributes-osioon:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "Muotoile JavaScript-koodi"
    }
  ]
},
            

              
                Copy
              
            
          

Ja päivitä activationEvents-osio:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

Laajennuksen testaaminen

1. Paina F5 käynnistääksesi laajennuksen uudessa VS Code -ikkunassa (Extension Development Host).
2. Avaa JavaScript-tiedosto Extension Development Hostissa.
3. Paina Ctrl+Shift+P (tai Cmd+Shift+P macOS:ssä) avataksesi komentopaletin.
4. Kirjoita Muotoile JavaScript-koodi ja valitse komento.
5. Aktiivisen editorin JavaScript-koodi pitäisi muotoilla Prettierillä.

Edistyneet tekniikat VS Code -laajennuskehityksessä

Kun olet oppinut perusteet, voit tutkia edistyneempiä tekniikoita luodaksesi hienostuneita ja tehokkaita VS Code -laajennuksia.

Language Server Protocol (LSP)

Language Server Protocol (LSP) määrittelee standardoidun tavan, jolla kielipalvelimet kommunikoivat IDE-ympäristöjen kanssa. LSP:n avulla voit tarjota edistyneitä kieliominaisuuksia, kuten:

• Koodin täydennys (IntelliSense): Ehdota relevantteja koodin täydennyksiä nykyisen kontekstin perusteella.
• Mene määrittelyyn: Siirry symbolin määrittelyyn.
• Etsi kaikki viittaukset: Etsi kaikki symbolin esiintymät työtilasta.
• Nimeä symboli uudelleen: Nimeä symboli uudelleen ja päivitä kaikki viittaukset.
• Koodin diagnostiikka (linttaus ja virheentarkistus): Tunnista mahdolliset virheet ja anna parannusehdotuksia.

Kirjastot kuten vscode-languageserver yksinkertaistavat LSP-pohjaisten laajennusten kehittämistä.

Debuggaustuki

VS Code tarjoaa tehokkaan debuggaus-API:n, jonka avulla voit laajentaa sen debuggausominaisuuksia. Voit:

• Luoda mukautettuja debug-adaptereita: Tue mukautettujen kielten tai ajonaikaisten ympäristöjen debuggausta.
• Lisätä debug-konfiguraatioita: Tarjoa valmiiksi määritettyjä debug-konfiguraatioita tietyille projektityypeille.
• Lisätä mukautettuja debug-näkymiä: Näytä debuggaustietoja mukautetuissa näkymissä.

Webview-näkymien käyttö

Webview-näkymät mahdollistavat verkkopohjaisten käyttöliittymien upottamisen VS Codeen. Tämä on hyödyllistä monimutkaisten konfiguraatiopaneelien, interaktiivisten dokumentaatiokatselimien tai visualisointien luomisessa. Voit käyttää HTML:ää, CSS:ää ja JavaScriptiä käyttöliittymän rakentamiseen ja kommunikoida laajennuksen taustaohjelman kanssa viestinvälityksen avulla.

Asetukset ja konfiguraatio

Anna käyttäjien mukauttaa laajennuksesi toimintaa asetusten avulla. Määrittele asetukset package.json-tiedoston contributes.configuration-osiossa. Käytä asetuksia vscode.workspace.getConfiguration()-API:n avulla.

Laajennuksen testaaminen

Laajennuksen perusteellinen testaaminen on ratkaisevan tärkeää sen laadun ja luotettavuuden varmistamiseksi. Käytä testauskehyksiä, kuten Mocha ja Chai, yksikkö- ja integraatiotestien kirjoittamiseen. VS Code tarjoaa sisäänrakennetun tuen testien ajamiseen editorissa.

VS Code -laajennuskehityksen parhaat käytännöt

Näiden parhaiden käytäntöjen noudattaminen auttaa sinua luomaan korkealaatuisia, ylläpidettäviä ja käyttäjäystävällisiä VS Code -laajennuksia:

• Käytä TypeScriptiä: TypeScript tarjoaa staattisen tyypityksen, joka auttaa havaitsemaan virheet aikaisin ja parantaa koodin ylläpidettävyyttä.
• Käytä asynkronista ohjelmointia: Vältä käyttöliittymäsäikeen estämistä käyttämällä asynkronisia ohjelmointitekniikoita, kuten async/await.
• Käsittele virheet siististi: Toteuta asianmukainen virheenkäsittely estääksesi kaatumiset ja antaaksesi käyttäjälle informatiivisia virheilmoituksia.
• Dokumentoi koodisi: Kirjoita selkeää ja ytimekästä dokumentaatiota auttaaksesi muita kehittäjiä ymmärtämään ja käyttämään laajennustasi.
• Noudata VS Coden laajennusohjeita: Noudata VS Coden laajennusohjeita varmistaaksesi, että laajennuksesi toimii hyvin ja integroituu saumattomasti editoriin. Nämä ohjeet kattavat aiheita kuten suorituskyky, turvallisuus ja käyttäjäkokemus.
• Käytä semanttista versiointia: Noudata semanttisen versioinnin (SemVer) periaatteita julkaistessasi uusia versioita laajennuksestasi.
• Pidä laajennuksesi ajan tasalla: Päivitä laajennustasi säännöllisesti sisällyttääksesi uusia ominaisuuksia, korjataksesi bugeja ja puuttuaksesi tietoturvahaavoittuvuuksiin.
• Kansainvälistäminen (i18n) ja lokalisointi (l10n): Ota huomioon VS Coden maailmanlaajuinen yleisö ja suunnittele laajennuksesi i18n/l10n mielessä pitäen. Tämä sisältää merkkijonojen ulkoistamisen ja käännösten tarjoamisen eri kielille.
• Saavutettavuus: Varmista, että laajennuksesi on saavutettavissa vammaisille käyttäjille. Noudata saavutettavuusohjeita suunnitellessasi käyttöliittymääsi ja harkitse avustavien teknologioiden käyttöä testauksessa.

Laajennuksen julkaiseminen

Kun olet tyytyväinen laajennukseesi, voit julkaista sen VS Code Marketplaceen, jolloin se on miljoonien kehittäjien saatavilla maailmanlaajuisesti.

1. Luo Azure DevOps -tili: Tarvitset Azure DevOps -tilin laajennustesi hallintaan.
2. Asenna vsce-työkalu: VS Code Extension Manager (vsce) on komentorivityökalu laajennusten paketointiin ja julkaisuun.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Paketoi laajennuksesi:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Julkaise laajennuksesi:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Seuraa VS Code Marketplacen verkkosivuston ohjeita saadaksesi tarkempia tietoja laajennuksesi julkaisemisesta.

Esimerkkejä todellisen maailman JavaScript VS Code -laajennuksista

Tässä on muutamia esimerkkejä suosituista JavaScript VS Code -laajennuksista, jotka osoittavat työkalujen integroinnin voiman:

• ESLint: Integroi ESLint-lintterin VS Codeen, tarjoten reaaliaikaista koodianalyysiä ja korostaen mahdollisia virheitä.
• Prettier: Muotoilee JavaScript-koodin automaattisesti yhtenäisen tyylin mukaisesti.
• JavaScript (ES6) code snippets: Tarjoaa kokoelman hyödyllisiä koodinpätkiä JavaScript-kehitykseen.
• Debugger for Chrome: Mahdollistaa Chromessa ajettavan JavaScript-koodin debuggaamisen suoraan VS Codesta.
• npm Intellisense: Täydentää automaattisesti npm-moduuleja import-lausekkeissa.

Nämä laajennukset osoittavat, kuinka VS Codea voidaan mukauttaa ja laajentaa tehokkaamman ja tuottavamman kehitysympäristön luomiseksi.

Yhteenveto

VS Code -laajennuskehitys on tehokas tapa tehostaa JavaScript-kehityksen työnkulkua, integroida ulkoisia työkaluja ja antaa panos laajempaan JavaScript-yhteisöön. Hallitsemalla laajennus-API:n perusteet, ymmärtämällä edistyneitä tekniikoita ja noudattamalla parhaita käytäntöjä voit luoda vaikuttavia laajennuksia, jotka ratkaisevat todellisia ongelmia ja parantavat kehittäjien elämää ympäri maailmaa. Hyödynnä laajennettavuuden voima ja avaa VS Coden koko potentiaali!